<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="/sys/css/formSelects-v4.css" />
<body>
	<form class="layui-form" action="" lay-filter="user-update-form" style="margin-top: 20px;">
		<input name="userId" th:value="${user.userId}" type="hidden">
		<div class="layui-form-item">
			<label class="layui-form-label">用户名：</label>
			<div class="layui-input-block">
				<input name="username" autocomplete="off" class="layui-input" placeholder="请输入用户名"
					th:value="${user.username}" lay-verify="required" readonly="readonly">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">选择部门：</label>
			<div class="layui-input-block">
				<input name="deptName" type="hidden" th:value="${user.deptName}">
				<select id="deptId" name="deptId" xm-select="deptId" lay-verify="required">
					<option value="">请选择部门</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">选择角色：</label>
			<div class="layui-input-block">
				<select name="roleIds" xm-select="roleIds">
					<option value="">请选择角色</option>
					<option th:each="role:${roles}" th:value="${role.roleId}" th:text="${role.roleName}"
						th:selected="${role.roleSign}"></option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">真实名称：</label>
			<div class="layui-input-block">
				<input name="name" placeholder="请输入真实名称" autocomplete="off" class="layui-input"
					th:value="${user.name}" lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号：</label>
			<div class="layui-input-block">
				<input name="mobile" placeholder="请输入手机号" autocomplete="off" class="layui-input"
					th:value="${user.mobile}" lay-verify="required|phone">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">E-mail：</label>
			<div class="layui-input-block">
				<input name="email" placeholder="请输入邮箱地址" autocomplete="off" class="layui-input"
					th:value="${user.email}" lay-verify="required|email">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态：</label>
			<div class="layui-input-block">
				<input th:field="*{user.status}" type="radio" name="status" value="1" title="正常" checked>
				<input th:field="*{user.status}" type="radio" name="status" value="0" title="禁用">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="user-update">立即提交</button>
			</div>
		</div>
	</form>
	<div th:include="include::footer"></div>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.config({
			base : '/sys/js/' //此处路径请自行处理, 可以使用绝对路径
		}).extend({
			formSelects : 'formSelects-v4'
		});
		layui.use([ 'layer', 'jquery', 'form', 'formSelects' ], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var formSelects = layui.formSelects;
			//角色下拉框
			formSelects.render('roleIds');
			//选择 部门
			formSelects.data('deptId', 'server', {//元素绑定
				url : '/sys/dept/choose',
				success : function(id, url, searchVal, result) { //使用远程方式的success回调
					var deptId = '[[${user.deptId}]]';
					formSelects.value(id, [ deptId ]);//默认选中 
				},
			}).on('deptId', function(id, vals, val, isAdd, isDisabled) {
				//id:           点击select的id
				//vals:         当前select已选中的值
				//val:          当前select点击的值
				//isAdd:        当前操作选中or取消
				//isDisabled:   当前选项是否是disabled
				var name = "";
				if (isAdd) {//选中
					formSelects.clear(id);//重置
					name = val.name;
					formSelects.value(id, [ val.value ]);
				}
				//赋值
				$("[name=deptName]").val(name);
			}, true);

			//监听提交
			form.on('submit(user-update)', function(data) {
				//提交数据data.field
				$.ajax({
					cache : true,
					type : "POST",
					url : "/sys/user/update",
					data : data.field,
					async : false,
					error : function(request) {
						layer.alert("Connection error");
					},
					success : function(r) {
						if (r.retCode == '0000') {
							parent.layer.msg("修改成功");
							parent.location.reload(); // 父页面刷新
							var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
							parent.layer.close(index);
						} else {
							layer.alert(r.retMsg)
						}
					}
				});
				return false;
			});
		});
	</script>
</body>
</html>